<template>
	<view class="coupon-wp">
		<view class="main-wp">
			<view class="title-wp">
				<view class="title">
					可使用代金劵
				</view>
				<view class="small-num">
					{{` ${total}   张`}}
				</view>
			</view>
			<view class="coupon">
				<u-radio-group size="30" placement="column" v-model="electValue" @change="changeCoupon">
					<view class="coupon-item" v-for="(info, index) in list" :key="index">
						<u-radio iconSize="26" :name="info.id">
							<view class="left" @click="handleClick(info)">
								<u--image :src="info.image" width="582rpx" height="240rpx" :radius="8"
									mode="aspectFill"></u--image>
								<view class="left-price-box">
									<view class="left-price">
										{{info.price}}
									</view>
									<view class="left-unit">
										元
									</view>
								</view>
								<view class="left-name">
									{{info.name}}代金券
								</view>
							</view>
						</u-radio>
					</view>
				</u-radio-group>
			</view>
		</view>
		<view class="bottom-box">
			<view class="submit-wp">
				<view class="left2">
					代金券价值 ￥ {{voucher.price?voucher.price:0}}
				</view>
				<view class="right" @click="chooseCoupon">
					确认
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				list: [],
				pageNo: 1,
				pageSize: 15,
				total: 0,
				count: '',
				num: 0,
				electValue: '',
				voucher: {},
			}
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onReachBottom() {
			if (this.pageNo * this.pageSize < this.total) {
				this.pageNo++
				this.getList()
			}
		},
		onLoad() {
			this.getList('reset')
		},
		onPullDownRefresh() {
			this.getList('reset')
		},
		methods: {

			async getList(type) {
				uni.showLoading({

				})
				let {
					openid
				} = uni.getStorageSync('openId')
				if (type == 'reset') {
					this.pageNo = 1
					this.total = 0
					this.list = []
				}
				let payload = {
					status: 0,
					useStatus: 0,
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					userOpenId: openid //fix 白户openId
				}
				let res = await this.$api.queryMsVoucherCodeList(payload)
				if (res.success && res.result.records) {
					if (type == 'reset') {
						this.list = res.result.records
					} else {
						this.list = [...this.list, ...res.result.records]
					}
					this.total = res.result.total
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				}
				uni.hideLoading()
				uni.stopPullDownRefresh()
			},
			changeCoupon(e) {
				this.voucher = this.list.find(item => item.id == e)
				// console.log(this.voucher);
			},
			handleClick(item) {
				this.voucher = item
				this.electValue = item.id
			},
			chooseCoupon() {
				if (!this.electValue || !this.voucher) return
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.voucher = this.voucher;
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.coupon-wp {
		height: 100%;
		background-color: #f6f8fa;

		.main-wp {
			margin: 32rpx;
			height: 100%;


			.title-wp {
				display: flex;
				align-items: center;
				height: 100rpx;

				.title {
					font-size: 30rpx;
					font-weight: 800;
					color: #1D2129;
				}

				.small-num {
					margin-left: 20rpx;
					width: 200rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #1D2129;

				}
			}


			.coupon {

				padding-bottom: 200rpx;

				.coupon-item {
					background: #fff;
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					.coupon-img {
						width: 582rpx;
						height: 240rpx;
						border-radius: 16rpx;
					}
				}
			}
		}
	}

	.left {
		margin-top: 5rpx;
		position: relative;

		.left-name {
			position: absolute;
			font-size: 50rpx;
			font-weight: 500;
			line-height: 50rpx;
			bottom: 32rpx;
			left: 40rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;

		}

		.left-price-box {
			display: flex;
			align-items: flex-end;
			position: absolute;
			top: 22rpx;
			left: 40rpx;

			.left-price {

				font-size: 110rpx;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: bold;
				line-height: 110rpx;
				background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

			}

			.left-unit {
				width: 35rpx;
				height: 35rpx;
				background: linear-gradient(180deg, #F9D3A8 0%, #FEF7E8 46%, #F9D3A8 100%);
				font-size: 25rpx;
				font-weight: 400;
				color: #922126;
				line-height: 34rpx;
				border-radius: 50%;
				text-align: center;
				position: relative;
				top: -2rpx;
			}

		}


		image {
			border-radius: 5rpx;
			width: 140rpx;
			height: 140rpx;
		}
	}




	.submit-wp {
		margin: 0 32rpx;
		display: flex;
		border-radius: 200rpx;
		overflow: hidden;


		.left2 {
			padding-left: 32rpx;
			width: 488rpx;
			height: 88rpx;
			background-color: #000;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
		}

		.right {
			background-color: #276AEE;
			text-align: center;
			width: 200rpx;
			height: 88rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 88rpx;

		}
	}
</style>